import React from 'react';
import type { Contact } from '../types/wechat';

const ContactList: React.FC<{
  contacts: Contact[];
  onSelect: (id: string) => void;
}> = ({ contacts, onSelect }) => (
  <div className="contact-list">
    {contacts.map(contact => (
      <div key={contact.id} className="contact-item" onClick={() => onSelect(contact.id)}>
        <img src={contact.avatar} alt={contact.name} className="avatar" />
        <div className="contact-info">
          <div className="contact-name">{contact.name}</div>
          {contact.remark && <div className="contact-remark">{contact.remark}</div>}
        </div>
      </div>
    ))}
  </div>
);

export default ContactList; 